<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <script src="https://lib.baomitu.com/vue/2.5.1/vue.js"></script>
    <style>

    </style>
</head>
<body>

<div id="app">
    <div>
        <label>Id:
            <input type="text" v-model="id">
        </label>
        <label>Name:
            <input type="text" v-model="name" @keyup.enter="add">
        </label>
        <label>
            <input type="button" value="添加" @click="add">
        </label>
        <label>搜索:
            <!-- 注意：Vue中所有的指令，在调用的时候，都以 v- 开头 -->
            <input type="text" v-model="keywords" id="search" v-focus v-color="'blue'">
        </label>
    </div>
    <div class="main_tab">
        <table class="tab" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Time</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in search(keywords)" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.time | dateFormat()}}</td>
                <td>
                    <button @click.prevent="del(item.id)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    //时间过滤器
    Vue.filter('dateFormat', function (dateStr, pattern = "") {
        var dt = new Date(dateStr);
        var y = dt.getFullYear()
        var m = (dt.getMonth() + 1).toString().padStart(2, "0") //padStart在头部填充，padEnd在尾部填充
        var d = dt.getDate().toString().padStart(2, "0");
        // return `${y}-${m}-${d}`
        // return y+"-"+m+"-"+d
        if (pattern.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
        } else {
            var hh = dt.getHours().toString().padStart(2, "0");
            var mm = dt.getMinutes().toString().padStart(2, "0");
            var ss = dt.getSeconds().toString().padStart(2, "0");
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
    })
    //自定义全局按键修饰符
    // Vue.config.keyCodes.f2=113


    //使用 Vue.directive() 定义全局的指令 v-focus
    //其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀
    //但是;在调用的时候，必须 在指令名称前，加上 v- 前缀来调用
    //参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关操作
    Vue.directive('focus', {
        bind: function (el) {
            //每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
            //注意：在每个函数中，第一个参数，永远是el,表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象
            //在元素 刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus方法，没有作用
            // 因为，一个元素，只有插入DOM之后，才能获取焦点
            el.focus()
        },
        inserted: function (el) { //inserted 表示元素 插入到DOM中的时候，会执行inserted函数（触发一次）
            el.focus()
            //和JS行为相关的操作，最好在inserted 中去执行，防止JS行为不生效
        },
        update: function (el) { //当Vnode更新的时候，会执行update，可能会触发多次

        }
    })
    //自定义 设置字体颜色的指令
    Vue.directive('color', {
        //样式，只通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
        //将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
        bind: function (el, bindding) {
            // el.style.color='red'
            //和样式相关的操作，可以在bind中执行
            //value 获取颜色的blue
            //expression 获取“”里的内容如：‘blue’
            el.style.color = bindding.value
        }
    })

    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            keywords: '',
            list: [{
                id: 1,
                name: '宝马',
                time: new Date()
            },
                {
                    id: 2,
                    name: '奔驰',
                    time: new Date()
                }
            ]
        },
        methods: {
            add: function () {
                var car = {
                    id: this.id,
                    name: this.name,
                    time: new Date()
                };
                this.list.push(car);
                this.id = this.name = '';
            },
            del(id) {
                this.list.some((item, i) => {
                    if (item.id == id) {

                        this.list.splice(i, 1);
                        return true;
                    }
                })

                // var index = this.list.findIndex(item => {

                // 	if(item.id ==id){
                // 		return true;
                // 	}
                // })
                // this.list.splice(index,1)
            },
            search(keywords) {
                var newList = []
                this.list.forEach(item => {
                    if (item.name.indexOf(keywords) != -1) {
                        newList.push(item)
                    }
                })
                return newList;
                // var newList = this.list.filter(item => {
                // 	if(item.name.includes(keywords)){
                // 		return item
                // 	}

                // })

                // return newList()
            }
        },
        filters: {
            //定义私有过滤器 过滤器有两条件 （过滤器名称和处理函数
        },
        directives: {
            //定义私有指令
        }
    })
    //js 使用光标搜索方式
    // document.getElementById('search').focus()
</script>
</body>
</html>
